<template>
    <div>
        <div class="share" v-for="(item, index) in sharecategory" :key="index">
            <div class="sharetitle">
                <div class="refresh">
                    <span>{{item.categoryName }}</span>
                    <span>更多></span>
                </div>
            </div>
            <div class="content">
                <div class="module" v-for="(content,index) in item.radios" :key="index">
                    <van-image :src="content.picUrl" radius="0.5rem" width="6rem" />
                    <div class="moduletext">
                        <span>{{ item.categoryName }}</span>
                        <span>{{ content.rcmdText }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            sharecategory: [], //播客个性化
        };
    },
    created() {
        this.getCategoryData();
    },
    methods: {
        getCategoryData() {
            this.$request("get", "/dj/category/recommend").then((res) => {
                console.log(res);
                this.sharecategory = res.data;
            });
        },
    },
};
</script>
<style scoped>
.share{
    margin: 1rem;
}
.sharetitle{
    display: flex;
    align-items: center;
}
.refresh{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.refresh :nth-of-type(1){
    font-size: 20px;
    font-weight: bold;
}
.content{
    display: flex;
    justify-content: center;
    
}
.module{
    display: inline-block;
    margin:0.5rem;
    width: 6rem;
    height:10rem;
    text-align: left;
    vertical-align: top;

}
.moduletext{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}
.moduletext :nth-of-type(1){
    font-size: 10px;
    color:rgb(80, 80, 80);
    margin-right: 0.5rem;
    border: 1px solid #000000;
    border-radius: 0.5rem;
    padding-left: 4px;
    padding-right: 4px;
}
</style>